<script setup lang="ts">
import {ref} from "vue";
import {DevSelectMutex, devUseExtractSelected} from "devecoui-plus";

const options = ref([
  {
    label: '选项1',
    value: '1'
  },
  {
    label: '选项2',
    value: '2'
  },
  {
    label: '选项3',
    value: '3'
  },
  {
    label: '选项4',
    value: '4'
  },
  {
    label: '选项5',
    value: '5'
  }
])

const list = ref([
  {
    label: '选项1',
    value: '1'
  },
  {
    label: '选项2',
    value: ''
  },
  {
    label: '选项3',
    value: ''
  },
  {
    label: '选项4',
    value: ''
  },
  {
    label: '选项5',
    value: ''
  }
])
const allSelectValue = devUseExtractSelected(list.value, 'value', false);
</script>

<template>
  <div v-for="(item,index) in list" :key="index">
    <p>选项{{ index + 1 }}：{{ item.value }}</p>
    <dev-select-mutex :all-select-value="allSelectValue" :options="options" v-model="item.value"/>
  </div>
</template>

